<template>
	<view class="niceui-flex-column">
		<swiper class="swiper" :circular="circular" :indicator-dots="indicatorDots" :autoplay="autoplay" :interval="interval"
			:duration="duration" :indicator-color="indicatorColor" :indicator-active-color="activeColor[current]"
			:previous-margin="leftRightMargin" :next-margin="leftRightMargin"
			@change="changeItem">
			<swiper-item v-for="img in items">
				<view class="banner">
					<image :src="img" mode="widthFix"></image>
				</view>
			</swiper-item>
		</swiper>
		<view class="pay-price">
			<text class="price">¥<text class="strong">{{items[current].level_payday}}</text>/天</text>
			<view class="pay">立即购买</view>
		</view>
		
		<view class="niceui-list">
			<view class="niceui-list-title">
				<text>权益介绍</text>
			</view>
			<view class="niceui-list-content">
				<view class="niceui-content-item" v-for="(nav,index) in quanyi">
					<text class="niceui-content-item-icon" :class="memberLevel+'-color'"> {{ nav.icon  }}  </text>
					<text class="niceui-content-item-text">{{nav.text}}</text>
					<text class="niceui-content-item-desc">{{nav.desc}}</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				items:[
					require('@/static/member1.png'),  //路径按导入项目后真实情况调整
					require('@/static/member2.png'),
					require('@/static/member3.png'),
					require('@/static/member4.png'),
					require('@/static/member5.png'),
					require('@/static/member6.png')
				],
				circular:false,
				indicatorDots: true,
				autoplay: false,
				interval: 2000,
				duration: 500,
				indicatorColor:'#e9e9e9',
				indicatorActiveColor:'red',
				leftRightMargin:'50rpx',
				current:0,
				memberLevel:'member1',
				activeColor:['#aec7e1','#f7ba28','#7690e9','#974df8','#e6bd79','#d49a67'],  //#a7b0e6; #e6bd79; #d49a67;
				prices:[300,600,1000,5000,7000,12000], 
				quanyi:[
					{
						icon:"\u{e60f}",
						text:'权益1',
						desc:'权益'
					},
					{
						icon:"\u{e654}",
						text:'权益2',
						desc:'权益'
					},
					{
						icon:"\u{e635}",
						text:'权益3',
						desc:'权益'
					},
					{
						icon:'\u{e615}',  //原代码：&#xe60a;
						text:'权益4',
						desc:'权益'
					},
					{
						icon:"\u{e635}",
						text:'权益5',
						desc:'权益'
					},
					{
						icon:'\u{e615}',  //原代码：&#xe60a;
						text:'权益6',
						desc:'权益'
					},
					{
						icon:'\u{e615}',  //原代码：&#xe60a;
						text:'权益7',
						desc:'权益'
					},
					{
						icon:"\u{e635}",
						text:'权益8',
						desc:'权益'
					},
					{
						icon:'\u{e615}',  //原代码：&#xe60a;
						text:'权益9',
						desc:'权益'
					}
				]
			}
		},
		methods: {
			changeItem(e){
				this.current = e.detail.current
				this.memberLevel = "member"+(e.detail.current+1)
			}
		}
	}
</script>

<style>
	@font-face {
		font-family: texticons;
		font-weight: normal;
		font-style: normal;
		src: url('https://at.alicdn.com/t/c/font_4366421_k5i3ya8nfw.ttf?t=1702189086737') format('truetype');
	}

	page,
	view {
		display: flex;
	}

	page {
		background-color: #fff;
	}

	.niceui-flex-column {
		flex-direction: column;
	}
</style>
<style lang="scss" scoped>
	$head-color:#5b8cff;  //5b8cff 4194fc
	$white-color:#fff;
	$radius:5rpx;
	$border-color:#efefef;
	$color-1: #6eacfe;
	$color-2: #52f0cf;
	$color-3: #ffcd46;
	$color-4: #ff727d;
	$list-item-height:100rpx;
	$list-margin:15rpx;
	.swiper{
		width: 100vw;
		padding: 30rpx 0 0;
		height: 420rpx;
		box-sizing: border-box;
	}
	.banner {
		padding: 10rpx 15rpx;
		
		image{
			width: calc(100vw - 80rpx);
			margin: 0 auto;
			height: 330rpx;
			border-radius: 20rpx;
		}
	}
	.pay-price{
		width: calc(100vw - 120rpx);
		margin: 20rpx auto 10rpx;
		justify-content: space-between;
		.price{
			color:#c16b2d;
			font-weight: bold;
			font-size: 26rpx;
			.strong{
				font-size: 40rpx;
			}
		}
		.pay{
			background-color: #f57b15;
			color:#fff;
			font-weight: bold;
			font-size: 32rpx;
			border-radius: 30rpx;
			padding:8rpx 35rpx;
		}
	}
	.niceui-list {
		background-color: #FFFFFF;
		margin:0 auto 0;
		padding-bottom:$list-margin ;
		width: calc(100vw - 0rpx);
		flex-direction: column;
		border-radius: $radius;
	}
	
	.niceui-list-title{
		padding:50rpx 0rpx 10rpx;
		font-size:38rpx;
		color:#333;
		font-weight: 600;
		width: 100vw;
		justify-content: center;
	}

	.niceui-list-content{
		box-sizing: border-box;
		padding: 25rpx 40rpx;
		flex-wrap: wrap;
		.niceui-content-item{
			width:33%;
			box-sizing: border-box;
			padding: 25rpx 0rpx;
			align-items: center;
			flex-direction: column;
			.niceui-content-item-icon{
				font-size:55rpx;
				font-weight: bold;
				font-family: texticons;
				border-radius: 50%;
				padding: 30rpx;
				margin-bottom: 10rpx;
			}
			.niceui-content-item-text{
				color:#666;
				font-size:32rpx;
				font-weight: 400;
			}
			.niceui-content-item-desc{
				color:#999;
				font-size:24rpx;
				font-weight: 300;
				margin-top: 0rpx;
			}
			
		}
	}
	.member1-color{
		background:#f2f8ff;
		color:#aec7e1;
	}
	.member2-color{
		background:#fff4cf;
		color:#f7ba28;
	}
	.member3-color{
		background:#f4f7ff;
		color:#839ef2; 
	}
	.member4-color{
		background:#f5ebfe;
		color:#974df8;
	}
	.member5-color{
		background:#fff1df;
		color:#e6bd79;
	}
	.member6-color{
		background:#fdf2e3;
		color:#d49a67;
	}
</style>